<template>
    <div class="myselfContainer">
        <div class="header">
            <div class="headerContent">
                <div class="robot">
                    <div class="robotImg"></div>
                </div>
                <div class="myInfo">
                    <div class="headImg"></div>
                    <div class="userName">
                        <p class="name">{{ user.name }}</p>
                        <p class="num">用户名：{{ user.username }}</p>
                    </div>
                    <div class="gotoSetting" @click="gotoSetting"></div>
                </div>
                <div class="moreInfo">
                    <div class="fans" @click="gotoFans">
                        <p class="fansNum">{{ user.fans }}</p>
                        <p class="describe">粉丝</p>
                    </div>
                    <div class="say" @click="gotoForum">
                        <p class="sayNum">{{ user.posts }}</p>
                        <p class="describe">帖子</p>
                    </div>
                    <div class="follow" @click="gotoFollow">
                        <p class="followNum">{{ user.follow }}</p>
                        <p class="describe">关注</p>
                    </div>
                </div>
            </div>
            <div class="myselfIntro">
                <div class="myselfContent">
                    <div class="sickSituation">
                        <div class="sick">
                            <div class="sickTitle">
                                <span>生病情况</span>
                            </div>
                            <div class="titleOther"></div>
                            <div class="total">
                                <span>100天小目标已达成！</span>
                            </div>
                        </div>
                        <div class="sickDetail">
                            <div class="sickTime">
                                <div class="sickTimeContent">
                                    <p class="sickTimeTitle"><span>{{ user.pcosOnsetDate }}</span> 月</p>
                                    <p class="sickDescribe">已患病</p>
                            </div>
                                </div>
                            <div class="improve">
                                <div class="improveContent">
                                    <p class="improveTitle"><span>{{ user.improvementTime }}</span> 天</p>
                                    <p class="improveDescribe">开始改善</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="myMessage myContainer">
                        <div class="myMessageTitle myTitle">
                            <div class="myMessageContent titleContent">
                                我的消息
                            </div>
                        </div>
                        <div class="messageSituation mySituation">
                            <div class="like" @click="gotoReceiveLike">
                                <van-badge :content="5" color="rgb(251, 72, 102)">
                                    <div class="likeImg img"></div>
                                </van-badge>
                                <p class="likeTitle">赞</p>
                            </div>
                            <div class="message" @click="gotoMessage">
                                <van-badge :content="99" color="rgb(251, 72, 102)">
                                    <div class="messageImg img"></div>
                                </van-badge>
                                <p class="messageTitle">消息</p>
                            </div>
                            <div class="notice" @click="gotoNotice">
                                <div class="noticeImg img"></div>
                                <p class="noticeTitle">通知</p>
                            </div>
                        </div>
                    </div>
                    <div class="mySee myContainer">
                        <div class="mySeeTitle myTitle">
                            <div class="mySeeTitleContent titleContent">
                                我的浏览
                            </div>
                        </div>
                        <div class="mySeeSituation mySituation">
                            <div class="myLike" @click="gotoMyLike">
                                <div class="myLikeImg img"></div>
                                <p class="myLikeTitle">我的赞</p>
                            </div>
                            <div class="collection" @click="gotoCollection">
                                <div class="collectionImg img"></div>
                                <p class="collectionTitle">我的收藏</p>
                            </div>
                            <div class="footprint" @click="gotoMyFootprint">
                                <div class="footprintImg img"></div>
                                <p class="footprintTitle">我的足迹</p>
                            </div>
                        </div>
                    </div>
                    <div class="myStore myContainer">
                        <div class="myStoreTitle myTitle">
                            <div class="myStoreTitleContent titleContent">
                                商城服务
                            </div>
                        </div>
                        <div class="myStoreSituation mySituation">
                            <div class="myOrder" @click="gotoOrder">
                                <div class="myOrderImg img"></div>
                                <p class="myOrderTitle">我的订单</p>
                            </div>
                            <div class="goodsCollection">
                                <div class="goodsCollectionImg img"></div>
                                <p class="goodsCollectionTitle">商品收藏</p>
                            </div>
                            <div class="goodsFootprint">
                                <div class="goodsFootprintImg img"></div>
                                <p class="goodsFootprintTitle">商品足迹</p>
                            </div>
                            <div class="card" @click="gotoCard">
                                <div class="cardImg img"></div>
                                <p class="cardTitle">购物车</p>
                            </div>
                        </div>
                    </div>
                    <div class="sportClass"></div>
                    <div class="moreService">
                        <div class="moreServiceContent">
                            <div class="helpCenter">
                                <div class="serviceTitle">
                                    <div class="helpCenterImg serviceImg"></div>
                                    <p class="serviceContent">帮助中心</p>
                                </div>
                                <div class="serviceOther"></div>
                            </div>
                            <div class="storeContact">
                                <div class="serviceTitle">
                                    <div class="storeContactImg serviceImg"></div>
                                    <p class="serviceContent">商城客服</p>
                                </div>
                                <div class="serviceOther"></div>
                            </div>
                            <div class="selfSetting">
                                <div class="serviceTitle">
                                    <div class="selfSettingImg serviceImg"></div>
                                    <p class="serviceContent">个人设置</p>
                                </div>
                                <div class="serviceOther"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { Badge } from 'vant';
    import axios from 'axios';
    export default {
        name:'myMyself',
        components:{
            'van-badge':Badge
        },
        data(){
            return{
                user:{name:'VVvVOK',num:'19357907317',fans:89,say:4,follow:9,sickTime:5,improveTime:100}
            }
        },
        methods:{
            gotoOrder(){
                this.$router.push({
                    name:'allGoodsContent'
                })
            },
            gotoMyLike(){
                this.$router.push({
                    name:'myLike'
                })
            },
            gotoCard(){
                this.$router.push({
                    name:'shoppingCard'
                })
            },
            gotoFans(){
                this.$router.push({
                    name:'myFans'
                })
            },
            gotoFollow(){
                this.$router.push({
                    name:'myFollow'
                })
            },
            gotoCollection(){
                this.$router.push({
                    name:'myCollection'
                })
            },
            gotoForum(){
                this.$router.push({
                    name:'allForum'
                })
            },
            gotoMyFootprint(){
                this.$router.push({
                    name:'myFootprint'
                })
            },
            gotoNotice(){
                this.$router.push({
                    name:'myNotice'
                })
            },
            gotoMessage(){
                this.$router.push({
                    name:'myMessage'
                })
            },
            gotoReceiveLike(){
                this.$router.push({
                    name:'receiveLike'
                })
            },
            gotoSetting(){
                this.$router.push({
                    name:'openVip'
                })
            }
        },
        mounted(){
            axios({
                url:'http://localhost:8080/polycystic/user/userCenter',
                method:'get',
                headers:{
                    token:localStorage.getItem('jwt')
                },
            }).then(res=>{
                console.log(res.data.data);
                this.user=res.data.data
                this.user.fans=89
                this.user.follow=10
            })
        }
    }
</script>

<style scoped>
    .myselfContainer{
        width: 100vw;
        height: 100vh;
        overflow-x: hidden;
        overflow-y: scroll;
        background-color: #F6F8FA;
        scrollbar-width: none; 
    }
    .header{
        width: 100%;
        margin: 0 auto;
    }
    .header::after{
        content: '';
        display: block;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        width: 100%;
        height: 40px;
        background:linear-gradient(to right, rgb(139, 196, 237),rgb(116, 172, 236));
    }
    .headerContent{
        background: linear-gradient(to right, rgb(139, 196, 237),rgb(116, 172, 236));
        width: 100%;
        margin: 0 auto;
        padding-bottom: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: hidden;
    }
    .robot{
        width: 6.86rem;
        margin-top: .96rem;
        display: flex;
        justify-content: end;
    }
    .robotImg{
        background-image: url(../assets/img/7-icon@2x/7-9roboticon.png);
        width: .72rem;
        height: .72rem;
        background-position: center;
        background-size: contain;
    }
    .headerContent .myInfo{
        width: 6.38rem;
        display: flex;
        overflow: hidden;
        position: relative;
    }
    .headImg{
        width: 1.48rem;
        height: 1.48rem;
        border-radius: 50%;
        background-color: #F6F8FA;
    }
    .userName{
        margin-top: .08rem;
        margin-left: .2rem;
    }
    .name{
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        font-size: .4rem;
    }
    .num{
        color:#FFF;
        font-size: .24rem;
        font-family: 'PingFangSC-Mediuem';
        margin-top: .1rem;
    }
    .gotoSetting{
        width: .4rem;
        height: .4rem;
        position: absolute;
        background-image: url(../assets/img/7-icon@2x/7-12gotoSetting.png);
        background-position: center;
        background-size: contain;
        right: 0;
        top:50%;
    }
    .headerContent .moreInfo{
        width: 5.54rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 10px;
    }
    .moreInfo>div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .moreInfo>div>p:nth-child(1){
        color:#FFF;
        font-family: 'PingFangSC-Mediuem';
    }
    .moreInfo>div>p:nth-child(2){
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        font-size: .24rem;
        margin-top: .04rem;
    }
    .myselfIntro{
        width: 100%;
        float: left;
    }
    .myselfContent{
        width: 6.86rem;
        margin: 0 auto;
        display: flex;
        margin-bottom: 80px;
        flex-direction: column;
        align-items: center;
    }
    .myselfContent>div{
        background-color: #FFF;
        width: 100%;
        border-radius: .3rem;
        margin-bottom: .2rem;
    }
    .sickSituation{
        width: 100%;
    }
    .sickSituation>div{
        width: 100%;
    }
    .sick{
        background-color: #F6F8FA;
        height: 30px;
        display: flex;
        align-items: center;
        border-top-left-radius: .3rem;
        border-top-right-radius: .3rem;
    }
    .sickTitle{
        background-color: #FFF;
        color:#333333;
        height: 100%;
        width: 100px;
        font-family: 'PingFangSC-Mediuem';
        display: flex;
        align-items: center;
        justify-content: center;
        border-top-left-radius: .3rem;
    }
    .titleOther{
        width: 0px;
        height: 0px;
        border-left: 30px solid #FFF;
        border-top: 30px solid #F6F8FA;
        border-right: 0px solid green;
    }
    .total{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'PingFangSC-Regular';
        color: #3333338c;
        font-size: .24rem;
        width: 4rem;
    }
    .sickDetail{
        display: flex;
        align-items: center;
    }
    .sickDetail>div{    
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100px;
        color:#333333;
        font-family: 'PingFangSC-Regular';
        font-size: 12px;
    }
    .sickDetail>div>div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .sickDetail>div span{
        font-family: 'PingFangSC-Mediuem';
        font-size: 19px;
    }
    .sickDetail>div>div p:nth-child(2){
        margin-top: .1rem;
    }
    .myContainer{
        width: 100%;
    }
    .myTitle{
        width: 100%;
        height: .6rem;
    }
    .titleContent{
        background-color: #FFF;
        color:#333333;
        height: 100%;
        width: 100px;
        font-family: 'PingFangSC-Mediuem';
        display: flex;
        align-items: center;
        justify-content: center;
        border-top-left-radius: .3rem;
    }
    .mySituation{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .mySituation>div{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 90px;
        color:#333333;
        font-family: 'PingFangSC-Regular';
        font-size: 12px;
    }
    .messageSituation>div,.mySeeSituation>div{
        width: 33%;
    }
    .myStoreSituation>div{
        width: 25%;
    }
    .img{
        background-position: center;
        background-size: contain;
        width: .48rem;
        height: .48rem;
        margin-bottom: .1rem;
    }
    .likeImg{
        background-image: url(../assets/img/7-icon@2x/7-22like.png);
    }
    .messageImg{
        background-image: url(../assets/img/7-icon@2x/7-21message.png);
    }
    .noticeImg{
        background-image: url(../assets/img/7-icon@2x/7-20notice.png);
    }
    .myLikeImg{
        background-image: url(../assets/img/7-icon@2x/7-19myLike.png);
    }
    .collectionImg{
        background-image: url(../assets/img/7-icon@2x/7-18collection.png);
    }
    .footprintImg{
        background-image: url(../assets/img/7-icon@2x/7-17footprint.png);
    }
    .myOrderImg{
        background-image: url(../assets/img/7-icon@2x/7-16myOrder.png);
    }
    .goodsCollectionImg{
        background-image: url(../assets/img/7-icon@2x/7-15goodCollection.png);
    }
    .goodsFootprintImg{
        background-image: url(../assets/img/7-icon@2x/7-14goodFootprint.png);
    }
    .cardImg{
        background-image: url(../assets/img/7-icon@2x/7-13card.png);
    }
    .sportClass{
        height: 80px;
    }
    .moreService{
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .moreServiceContent{
        width: 90%;
        height: 90%;
        display: flex;
        flex-direction: column;
    }
    .moreServiceContent>div{
        width: 100%;
        height: 33%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .serviceTitle{
        display: flex;
        align-items: center;
    }
    .serviceImg{
        background-position: center;
        background-size: contain;
        width: .32rem;
        height: .32rem;
    }
    .helpCenterImg{
        background-image: url(../assets/img/7-icon@2x/7-10helpCenter.png);
    }
    .storeContactImg{
        background-image: url(../assets/img/7-icon@2x/7-11setting.png);
    }
    .selfSettingImg{
        background-image: url(../assets/img/7-icon@2x/7-11setting.png);
    }
    .serviceContent{
        color:#333333;
        font-family: 'PingFangSC-Mediuem';
        font-size: .24rem;
        margin-left: 3px;
    }
    .serviceOther{
        background-position: center;
        background-size: contain;
        width: .4rem;
        height: .4rem;
        background-image: url(../assets/img/7-icon@2x/7-12gotoSetting.png);
    }
</style>